<template>
	<div id="G-loading1" class="comloading" v-show='loadshow'>
		<div class="loading-wrap">
			<ul class="loading">
				<li class="load-item load-item1"></li>
				<li class="load-item load-item2"></li>
				<li class="load-item load-item3"></li>
				<li class="load-item load-item4"></li>
				<li class="load-item load-item5"></li>
				<li class="load-item load-item6"></li>
				<li class="load-item load-item7"></li>
				<li class="load-item load-item8"></li>
				<li class="load-item load-item9"></li>
				<li class="load-item load-item10"></li>
				<li class="load-item load-item11"></li>
				<li class="load-item load-item12"></li>
			</ul>
			<p class="loading-title">{{ tips }}</p>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
//		props:['title'],
		data(){
			return {
				loadshow: false,
				tips: '录音'
			}
		},
		methods:{
			show: function(){
				this.loadshow = true;
			},
			hide: function(){
				this.loadshow = false;
			}
		}
	}
</script>
<style type="text/css" lang="less" scoped>
	ul,li,p{
		padding: 0;
		margin: 0;
	}
	#G-loading1{
		.loading-wrap{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 140px;
			height: 140px;
			background: #383838;
			border-radius: 3px;
		}

		.loading{
			position: relative;
			margin: 10px auto 0;
			width: 80px;
			height: 80px;
			.load-item{
				position: absolute;
				width:100%;
				height: 100%;
				top: 0;
				left: 0;
				text-align: center;
			}
			.load-item:before{
				content: "";
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: white;
				animation: loading 1.2s infinite ease-in-out;
				animation-fill-mode: both;
			}
			.load-item1{transform: rotate(0deg);}
			.load-item2{transform: rotate(30deg);}
			.load-item3{transform: rotate(60deg);}
			.load-item4{transform: rotate(90deg);}
			.load-item5{transform: rotate(120deg);}
			.load-item6{transform: rotate(150deg);}
			.load-item7{transform: rotate(180deg);}
			.load-item8{transform: rotate(210deg);}
			.load-item9{transform: rotate(240deg);}
			.load-item10{transform: rotate(270deg);}
			.load-item11{transform: rotate(300deg);}
			.load-item12{transform: rotate(330deg);}

			.load-item2:before{animation-delay: -1.1s;}
			.load-item3:before{animation-delay: -1.0s;}
			.load-item4:before{animation-delay: -0.9s;}
			.load-item5:before{animation-delay: -0.8s;}
			.load-item6:before{animation-delay: -0.7s;}
			.load-item7:before{animation-delay: -0.6s;}
			.load-item8:before{animation-delay: -0.5s;}
			.load-item9:before{animation-delay: -0.4s;}
			.load-item10:before{animation-delay: -0.3s;;}
			.load-item11:before{animation-delay: -0.2s;}
			.load-item12:before{animation-delay: -0.1s;}
			@keyframes loading {
			  	0% { opacity: .3; transform:scale(1);}
			  	40% { opacity: 1; transform:scale(1.3);} 
			  	39%{ opacity: .3; transform:scale(1);}
			  	100%{ opacity: .3; transform:scale(1);}
			}
		}

		.loading-title{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			color: white;
			font-size: 18px;
		}
	}
</style>